<template>
  <div class="app-container">
    <el-dialog
      :visible="visible"
      :title="$t('outboundOrderLang.modifyRecipientInfo')"
      width="85% "
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="detailRef"
        :model="detailDataForm"
        :rules="rules"
        label-width="120px"
        label-suffix=":"
      >
        <el-descriptions
          class="margin-top"
          :title="$t('harvestLang.orderInfo')"
          :column="2"
          border
          style="width: 700px; padding-left: 30px; margin: 0 auto"
        >
          <el-descriptions-item>
            <template slot="label">
              {{ $t("outboundOrderLang.logisticsDocumentNumber") }}
            </template>
            <!-- {{ detailDataForm. }} -->
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ $t("harvestLang.logisticsProducts") }}
            </template>
            <!-- {{ detailDataForm. }} -->
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ $t("statusLang.status") }}
            </template>
            {{ detailDataForm.status }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ $t("harvestLang.customerName") }}
            </template>
            {{ detailDataForm.customerCodeAndName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ $t("warehouseEntryLang.managerPerson") }}
            </template>
            {{ detailDataForm.managerPerson }}
          </el-descriptions-item>
        </el-descriptions>
        <div>
          <h3>{{ $t("outboundOrderLang.recipientInformation") }}</h3>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item
              prop="recipient"
              :label="$t('outboundOrderLang.recipient')"
            >
              <el-input
                v-model="detailDataForm.recipient"
                :placeholder="$t('pleaseEnter')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item
              prop="recipientCompany"
              :label="$t('outboundOrderLang.recipient')"
            >
              <el-input
                v-model="detailDataForm.recipientCompany"
                :placeholder="$t('pleaseEnter')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              prop="recipientTaxNumber"
              :label="$t('outboundOrderLang.recipientTaxNumber')"
            >
              <el-input
                v-model="detailDataForm.recipientTaxNumber"
                :placeholder="$t('pleaseEnter')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="recipientLicenseNumber"
              :label="$t('outboundOrderLang.recipientLicenseNumber')"
            >
              <el-input
                v-model="detailDataForm.recipientLicenseNumber"
                :placeholder="$t('pleaseEnter')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="recipientEmail"
              :label="$t('outboundOrderLang.recipientEmail')"
            >
              <el-input
                v-model="detailDataForm.recipientEmail"
                :placeholder="$t('pleaseEnter')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              prop="recipientPhone"
              :label="$t('outboundOrderLang.recipientPhone')"
            >
              <el-input
                v-model="detailDataForm.recipientPhone"
                :placeholder="$t('pleaseEnter')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="recipientMobilePhone"
              :label="$t('outboundOrderLang.recipientMobilePhone')"
            >
              <el-input
                v-model="detailDataForm.recipientMobilePhone"
                :placeholder="$t('pleaseEnter')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="postCode"
              :label="
                $t('outboundOrderLang.recipient') + $t('depotLang.postCode')
              "
            >
              <el-input
                v-model="detailDataForm.postCode"
                :placeholder="$t('pleaseEnter')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              prop="country"
              :label="
                $t('outboundOrderLang.recipient') + $t('depotLang.country')
              "
            >
              <el-input
                v-model="detailDataForm.country"
                :placeholder="$t('pleaseEnter')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="provinceStates"
              :label="
                $t('outboundOrderLang.recipient') +
                  $t('depotLang.provinceStates')
              "
            >
              <el-input
                v-model="detailDataForm.provinceStates"
                :placeholder="$t('pleaseEnter')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="city"
              :label="$t('outboundOrderLang.recipient') + $t('depotLang.city')"
            >
              <el-input
                v-model="detailDataForm.city"
                :placeholder="$t('pleaseEnter')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          prop="address"
          :label="$t('outboundOrderLang.recipient') + $t('depotLang.address')"
        >
          <el-input
            v-model="detailDataForm.recipientMobilePhone"
            :placeholder="$t('pleaseEnter')"
          />
        </el-form-item>
        <el-form-item prop="remark" :label="$t('harvestLang.modifiedRemarks')">
          <el-input
            v-model="detailDataForm.remark"
            :placeholder="$t('pleaseEnter')"
          />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="handleSubmit">{{
          $t("submit")
        }}</el-button>
        <el-button type="warning" plain @click="cancel">{{
          $t("cancel")
        }}</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      detailDataForm: {},
      rules: {
        recipient: {
          required: true,
          message:
            this.$t('pleaseEnter') + this.$t('outboundOrderLang.recipient'),
          trigger: 'blur'
        },
        recipientPhone: [
          {
            required: true,
            message:
              this.$t('pleaseEnter') +
              this.$t('outboundOrderLang.recipientPhone'),
            trigger: 'blur'
          },
          {
            required: true,
            pattern: /^[\\d\\*]{7,12}$/,
            message: this.$t('pleaseEnterCorrectly'),
            trigger: 'blur'
          }
        ],
        recipientMobilePhone: [
          {
            relquired: true,
            message:
              this.$t('pleaseEnter') +
              this.$t('outboundOrderLang.recipientMobilePhone'),
            trigger: 'blur'
          },
          {
            required: true,
            pattern: /[1]+[3456789]+\d{9}/,
            message: this.$t('pleaseEnterCorrectly'),
            trigger: 'blur'
          }
        ],
        recipientEmail: [
          {
            required: true,
            message:
              this.$t('pleaseEnter') +
              this.$t('outboundOrderLang.recipientEmail'),
            trigger: 'blur'
          },
          {
            required: true,
            pattern:
              /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
            messsage: this.$t('pleaseEnterCorrectly'),
            trigger: 'blur'
          }
        ],
        postCode: [
          {
            required: true,
            message:
              this.$t('pleaseEnter') +
              this.$t('outboundOrderLang.recipient') +
              this.$t('depotLang.postCode'),
            trigger: 'blur'
          },
          {
            required: true,
            pattern: /^[0-9]{6}$/,
            message: this.$t('pleaseEnterCorrectly'),
            trigger: 'blur'
          }
        ],
        country: {
          required: true,
          message:
            this.$t('pleaseEnter') +
            this.$t('outboundOrderLang.recipient') +
            this.$t('depotLang.country'),
          trigger: 'blur'
        },
        provinceStates: {
          required: true,
          message:
            this.$t('pleaseEnter') +
            this.$t('outboundOrderLang.recipient') +
            this.$t('depotLang.provinceStates'),
          trigger: 'blur'
        },
        city: {
          required: true,
          message:
            this.$t('pleaseEnter') +
            this.$t('outboundOrderLang.recipient') +
            this.$t('depotLang.city'),
          trigger: 'blur'
        },
        address: {
          required: true,
          message:
            this.$t('pleaseEnter') +
            this.$t('outboundOrderLang.recipient') +
            this.$t('depotLang.address'),
          trigger: 'blur'
        },
        remark: {
          required: true,
          message:
            this.$t('pleaseEnter') + this.$t('harvestLang.modifiedRemarks'),
          trigger: 'blur'
        }
      }
    }
  },
  methods: {
    async handleSubmit() {
      const flag = await this.$confirm(
        this.$t(
          'outboundOrderLang.afterTheOrderRecipientInformationIsModified'
        ) +
          this.$t('outboundOrderLang.theSystemRecalculatesTheOrderAmount') +
          this.$t('outboundOrderLang.pleaseConfirmModifyOrNot'),
        this.$t('hint'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).catch((err) => err)
      if (flag === 'cancel') return
      // TODO 调接口
    },
    cancel() {
      this.$emit('close')
    },
    close() {
      this.$emit('close')
    },
    closed() {
      this.reset()
    },
    reset() {
      this.detailDataForm = {}
    }
  }
}
</script>

<style></style>
